<template>
    <div v-if="data">
        <a-modal v-model:open="open" title="系统公告详情" okText="确定" cancelText="取消" width="100%"
            wrap-class-name="full-modal" @ok="handleOk">
            <p>{{ data.message }}</p>
        </a-modal>
    </div>
</template>
<script lang="ts" setup>

// 接收父组件传递的选中数据
const props = defineProps({
    data: {
        type: Object,
        default: null // 默认值为 null
    }
})

// 控制模拟框显示
const open = ref<boolean>(false);

const handleOk = (e: MouseEvent) => {
    console.log(e);
    open.value = false;
};

watch(() => props.data, (newVal) => {
    if (newVal) {
        open.value = true   //  当接收到数据时，打开模态框
    }
})
</script>
<style lang="scss">
.full-modal {
    .ant-modal {
        top: 0;
        max-width: 100%;
        padding-bottom: 0;
        margin: 0;
    }

    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
    }

    .ant-modal-body {
        flex: 1;
    }
}
</style>